<template>
	<div>
		<Panle title='角色管理' content="角色列表"></Panle>
		<div class="searchbar">
			<el-row class="pt20">
			  <el-col :span="12">
				  <el-button size="mini" @click="init()">刷新</el-button>
				  <PersButton icon="el-icon-edit" size="mini" @click="add()" perms="sys:role:add" type="primary" label="添加"></PersButton>
			  <PersButton type="danger" size="mini" icon="el-icon-delete"  @click="delAll()"  perms="sys:role:del" label="批量删除" ></PersButton>
			  </el-col>
			  <el-col :span="12" style="text-align: right;">
			  	<el-form :inline="true" :model="formInline" class="demo-form-inline">
			  		
			  	  <el-form-item label="">
			  	    <el-input v-model="formInline.keyword" size="mini" placeholder="请输入角色名称"></el-input>
			  	  </el-form-item>
			  	  
			  	  <el-form-item>
			  	    <el-button type="primary"  size="mini" @click="serach">查询</el-button>
			  	  </el-form-item>
			  	</el-form>
			  </el-col>
			</el-row>  
		</div>
		
		<el-table
					:data="tableData"
		style="width: 100%;margin-bottom: 20px;" 
		row-key="id" 
		border 
		stripe 
		default-expand-all  
		v-loading="loading"
		@selection-change="handleSelectionChange"
		>
		<el-table-column
		  type="selection"
		  width="55">
		</el-table-column>
		<el-table-column prop="role_id" label="ID"  width="55"></el-table-column>
		<el-table-column prop="role_name" label="角色名称" >
					 
					  
		</el-table-column>
		<el-table-column prop="status" label="状态" >
					<template slot-scope="scope">
					  <el-switch v-model="scope.row.status" active-color="#13ce66" inactive-color="#ff4949" @change="changeSwitch(scope.row)" :active-value="0" :inactive-value="1"></el-switch>
					</template>
					  
		</el-table-column>
		<el-table-column prop="order_num" label="排序" >
			<template slot-scope="scope">
			 <el-input v-model="scope.row.order_num" placeholder="请输入内容" size="mini" @input="changInput(scope.row)"></el-input>
		    </template>
		</el-table-column>
		
		
		<el-table-column prop="create_time" label="创建时间" ></el-table-column>
		<el-table-column prop="remark" label="备注"></el-table-column>
		<el-table-column prop="role_id" label="操作" >
					  <template slot-scope="scope">
					  <PersButton type="text" size="mini" label="编辑" icon="fa  fa-pencil" perms="sys:role:edit" @click="editRole(scope.row)"></PersButton>
					  <PersButton type="text" size="mini" icon="el-icon-delete" perms="sys:role:del" label="删除" @click="delRole(scope.row)" ></PersButton>
		    </template>
		</el-table-column>
		</el-table>
		<div class="block">
		    
		    <el-pagination
		      @size-change="handleSizeChange"
		      @current-change="handleCurrentChange"
		      :current-page="pageNumber"
		      :page-sizes="[10, 50, 100, 200]"
		      :page-size="pageSize"
		      layout="total, sizes, prev, pager, next, jumper"
		      :total="total">
		    </el-pagination>
		  </div>
		  <!-- 添加角色 -->
		  <el-dialog :visible.sync="open" width="600px" append-to-body :title="!form.role_id ? '新增角色' : '修改角色'"  >
		  		   <el-form ref="form" :model="form" :rules="rules" label-width="80px">
		  		     <el-row>
		  				 
		  			  
		  			  
		  			   <el-col :span="24">
		  			     <el-form-item label="角色名称" prop="role_name">
		  			       <el-input v-model="form.role_name" placeholder="请输入角色名称" size="small"  />
		  			     </el-form-item>
		  			   </el-col>
		  			 
		  			  <el-col :span="24">
		  			    <el-form-item label="备注">
							<el-input v-model="form.remark" type="textarea" placeholder="请输入角色名称" size="small"  />
		  			    </el-form-item>
		  			  </el-col>
		  			   
		  			   <el-col :span="12" >
		  			     <el-form-item  label="是否启用" prop="status">
		  			      <el-radio-group v-model="form.status">
		  			        <el-radio :label="0" >启用</el-radio>
		  			        <el-radio :label="1">禁用</el-radio>
		  			      </el-radio-group>
		  			     </el-form-item>
		  			   </el-col>
		  			   
		  			 <el-col :span="24">
						 <el-form-item label="角色权限"  prop="rules">
						        <el-tree
						      ref="tree"
						   :data="parentDate"
						   show-checkbox
						   node-key="id"
						   default-expand-all
						   :default-checked-keys="checkKey"
						    :props="props"
						   @data-change="handlechange"
						   class="groupmenu">
						 </el-tree>
						    </el-form-item>
					 </el-col>
		  			 
		  			
		  			   <el-col :span="24">
		  			     <el-form-item label="显示排序" prop="order_num">
		  			       <el-input-number v-model="form.order_num" controls-position="right" :min="0" :value="100" size="small"/>
		  			     </el-form-item>
		  			   </el-col>
		  		     </el-row>
		  			</el-form>
		  			<div slot="footer" class="dialog-footer">
		  			  <el-button @click="open = false" size="small">取 消</el-button>
		  			  <el-button type="primary"  @click="!form.role_id ? submitForm('form') : subEditForm('form') " size="small">确 定</el-button>
		  			</div>
		  			
		  </el-dialog>
	</div>
</template>

<script>
	var _self;
	import Panle from '@/components/Panle'
	import PersButton from '@/components/PersButton'
	import {listRoles,addRoles,listRolesMenu,editRoles,delRole,changeStatus,changeOrder,batchRemove} from '@/api/system/role'
	import {getMenuList} from '@/api/system/menu'
	export default{
		components:{
			Panle,
			PersButton
		},
		data(){
			return{
				formInline:{},
				loading:false,
				pageSize:10, //一页显示多少条
				pageNumber:1,
				total:0,//总页数
				tableData:[],
				serachword:'',
				open:false,
				form:{
					"role_id":'',
					"role_name":"",
					"remark":"",
					"status":0,
					"order_num":100,
					"rules":[]
				},
				rules:{
					role_name:[
						{ required: true, message: "角色名称不能为空", trigger: "blur" }
					],
					status:[
						{ required: true, message: "请选择是否启用", trigger: "blur" }
					],
					rules:[
						{ required: true, message: "请选择角色权限", trigger: "blur" }
					]
				},
				parentDate:[],
				props: {
				  // 配置项（必选）
				  value: "id",
				  label: "name",
				  children: "children"
				 
				},
				checkKey:[],
				multipleSelection:[]
			}
		},
		created() {
			_self =this;
			_self.init();
		},
		methods:{
			init:function(){
				_self.loading=true;
				let param={"pageSize":_self.pageSize,"pageNumber":_self.pageNumber,"keyword":_self.serachword}
				listRoles(param).then((res)=>{
					
					if(res.code==200){
						_self.tableData=res.data.list;
						_self.total = res.data.total;
						_self.loading=false;
					}
				})
				
				//这里要判断是否有这个
				if(_self.parentDate.length==0){
					
				
				getMenuList().then((res)=>{
					if(res.code==200){
						
						 const menu = { id: 0, name: '全部权限', children: [] };
						 menu.children = res.data.menuTree;
						 _self.parentDate.push(menu);
						 _self.loading = false;
					}
					
				})
				}
			},
			add:function(){
				_self.form= {
				  "role_id":'',
				  "role_name":"",
				  "remark":"",
				  "status":0,
				  "order_num":100,
				  "rules":[]
				};
				 _self.checkKey = [];
				 _self.handlechange();
				_self.open=true;
			},
			handlechange:function(data){
				console.log(data);
				if(data){
				  this.$nextTick(() => {
				  let checkTreeNode = []
				  for(let item of data){
				    let node = this.$refs.tree.getNode(item)
				    if(node && node.isLeaf){
				      checkTreeNode.push(item);
				    }
				  }
				  this.$refs.tree.setCheckedKeys(checkTreeNode);
				  });
				  
				}else{
				  this.$nextTick(() => {
				    this.$refs.tree.setCheckedKeys(_self.checkKey);
				 });
				}
			},
			submitForm:function(data){
				let trees=   _self.$refs.tree.getCheckedKeys().concat(_self.$refs.tree.getHalfCheckedKeys());
				_self.form.rules = trees;
				_self.$refs[data].validate((valid) => {
					if (valid) {
						addRoles(_self.form).then((res)=>{
							console.log(res)
							if(res.code==200){
								_self.msgSuccess(res.msg);
								_self.init();
								_self.open=false;
							}else{
								_self.msgError(res.msg);
							}
						})
					}else{
						 return false;
					}
				})
			},
			handleSizeChange:function(e){
			    console.log(e);
			    _self.pageSize = e;
			    _self.init();
			},
			handleCurrentChange:function(e){
			    console.log(e);
			    _self.pageNumber=e;
			    _self.init();
			},
			handleSelectionChange:function(e){
			  console.log(e);
			  let selectChang=[]
			  for(let item of e){
			    selectChang.push(item.role_id)
			   
			  }
			  _self.multipleSelection =selectChang;
			  console.log(selectChang);
			},
			editRole:function(data){
				
				_self.form.role_id = data.role_id;
				listRolesMenu(data.role_id).then((res)=>{
					_self.checkKey = res.data;
					_self.handlechange(res.data);
				})
				let editForm ={
					"role_id":data.role_id,
					"role_name":data.role_name,
					"remark":data.remark,
					"status":data.status,
					"order_num":data.order_num,
					}
				Object.assign(_self.form,editForm);
				_self.open=true;
			},
			subEditForm:function(data){
				
				let trees = _self.$refs.tree.getCheckedKeys().concat(_self.$refs.tree.getHalfCheckedKeys());
				_self.form.rules = trees;
				_self.$refs[data].validate((valid) => {
					if (valid) {
						editRoles(_self.form).then((res)=>{
							if(res.code==200){
								_self.msgSuccess(res.msg);
								_self.init();
								_self.open=false;
								
							}else{
								_self.msgError(res.msg);
							}
						})
					}else{
						 return false;
					}
				})
				
			},
			delRole(data) {
			  _self.$confirm('确定删除【' + data.role_name + '】此规则', '提示', {
			    confirmButtonText: '确定',
			    cancelButtonText: '取消',
			    type: 'warning'
			  }).then(() => {
			    
				delRole(data.role_id).then((res)=>{
					if(res.code==200){
						_self.msgSuccess(res.msg);
						_self.init();
					}else{
						_self.msgError(res.msg);
					}
				})
			
				
			  }).catch(() =>{
			    _self.$message({
			      type: 'info',
			      message: '已取消删除'
			    });
			  });
			},
			changeSwitch:function(data){
				changeStatus(data.role_id).then((res)=>{
					if(res.code==200){
						_self.msgSuccess(res.msg);
						_self.init();
					}else{
						_self.msgError(res.msg);
					}
				})
			},
			changInput:function(data){
				console.log(data);
				let datas={
					'id':data.role_id,
					'num':data.order_num
				}
				changeOrder(datas).then((res)=>{
					if(res.code==200){
						_self.msgSuccess(res.msg);
						_self.init();
					}else{
						_self.msgError(res.msg);
					}
				})
			},
			delAll:function(){
			   
			  if(_self.multipleSelection.length==0){
			     _self.$alert('请选择要删除的数据', '系统提示', {
			     confirmButtonText: '确定',
			     type: 'error',
			    }); 
			    return false;     
			  }
			     _self.$confirm('此操作将永久删除此数据, 是否继续?', '提示', {
			     confirmButtonText: '确定',
			     cancelButtonText: '取消',
			     type: 'warning'
			   }).then(() => {
				   let data={ids:_self.multipleSelection}
				   batchRemove(data).then((res)=>{
					   if(res.code==200){
						   _self.msgSuccess(res.msg);
						   _self.init();
					   }else{
						   _self.msgError(res.msg);
					   }
				   })
				   
				   
				   
				   
			    
			   }).catch(() => {
			     this.$message({
			       type: 'info',
			       message: '已取消删除'
			     });    
			     _self.$refs.multipleTable.clearSelection();      
			   });
			 
			},
			serach:function(){
				_self.serachword = _self.formInline.keyword;
				
				_self.init();
			}
		}
		
		}
</script>

<style>
	.pt20{
		padding-top: 10px;
	}
	.el-table{
		margin-top: 10px;
		
	}
	.el-table__header tr,
	  .el-table__header th {
	    padding: 0 !important;
	    height: 40px;
	    font-size: 12px;
	    text-align: center;
	}
	.el-table__body tr,
	  .el-table__body td {
	    padding: 0 !important;
	    height: 40px;
	    font-size: 12px;
	    text-align: center;
	}
	.block{
	    padding: 10px;
	    text-align: left;
	}
	.pt20 .el-form-item{margin-bottom: 0;}
	.el-dialog__header{
		background: #2f353f;
		padding: 10px 20px 10px;
	}
	
	.el-dialog__title{
		font-size: 14px;
		color: #FFFFFF !important;
	}
	.el-dialog__headerbtn{
		top: 12px;
	}
	.el-form-item__label{
		font-size: 12px;
	}
	.el-radio__label{
		font-size: 12px;
	}
	.el-input-number--small{
		width: 100%;
	}
	
	.el-tree{
	  max-height: 200px;
	  overflow: auto;
	  background: #f7f7f7;
	}
	.el-tree-node__label,.el-textarea__inner{
	  font-size: 12px;
	}
	.groupmenu .el-tree-node__children .el-tree-node__children .el-tree-node__children  .el-tree-node__content{
	    float:left;
	    width:100px;
	}
</style>
